<template>
  <!--
   :data : 表示表格中需要渲染的数据
    一条记录     一行数据   [{date:'',name:'',address:''},{}...]
    prop="date"
    width="180" 列宽
    label="日期"  表格标题
  -->
  <div>
    <el-button type="primary" plain size="small" @click="add">新增</el-button>
    <el-button type="danger" plain size="small" @click="batchDel">批量删除</el-button>
    <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="date"
          label="时间">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--
    current-page:当前页
    page-sizes: 每页显示的数据条数下拉选数据
    page-size: 每页展示的数据条数
    layout: 分页器布局
    total: 数据总条数
    @size-change   分页下拉选数据改变监听
    @current-change 页码点击事件的监听
    -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearInfo">
      <el-form :model="form" :rules="rules" ref="dialogForm">
        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth" prop="region">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>


<script>
export default {
  name: "TableView",
  data() {
    return {
      title: '新增',
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 3,
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 4,
          date: '2016-05-01',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 5,
          date: '2016-05-03',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      multipleSelection: [],
      currentPage: 1,
      pageSizes: [5, 10, 15, 20],
      pageSize: 5,
      total: 100,
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请输入活动区域', trigger: 'blur'}
        ]
      },
      formLabelWidth: '80px',
      dialogFormVisible: false,  //  控制对话框的显示隐藏
      form: {
        name: '',
        region: ''
      }
    }
  },
  methods: {
    // 编辑
    handleEdit(row) {
      console.log(JSON.stringify(row));
      this.title = '编辑'
      this.dialogFormVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {   // 确定
        let {id} = row
        console.log('删除http请求已发送', id)
        // 发送异步请求
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 复选 参数  val  表示当前选中行的数据
    handleSelectionChange(val) {
      this.multipleSelection = val.map(row => row.id)
      console.log(JSON.stringify(this.multipleSelection))
    },
    // 批量删除
    batchDel() {
      if (this.multipleSelection.length == 0) {
        console.log('请至少选择一条数据')
        return
      }
      console.log('批量删除请求已发送,参数是:', JSON.stringify(this.multipleSelection))
    },
    // 新增
    add() {
      console.log('添加数据请求已发送')
      this.title = '新增'
      this.dialogFormVisible = true
    },
    handleSizeChange(val) {
      //pageSize
      this.pageSize = val
      console.log(this.pageSize)
    },
    handleCurrentChange(val) {
      // currentPage
      this.currentPage = val
      console.log(this.currentPage)
    },
    clearInfo() {

    }

  }
}
</script>


<style scoped>

</style>